<script lang="ts" setup>
import { ref, watch } from 'vue'
import type { CheckboxValueType } from 'element-plus/es'


// 基础信息数据
const input1 = ref('')
const input2 = ref('')
const input3 = ref('')
const input4 = ref('')

// 个人资料数据
const dateValue = ref('')
const radio1 = ref('1')
const value001 = ref('')
const value002 = ref('')
const agreement = ref(false)

const options_qualification = [
  { value: 'Option1', label: '专科' },
  { value: 'Option2', label: '本科' },
  { value: 'Option3', label: '硕士研究生' },
  { value: 'Option4', label: '博士研究生' },
  { value: 'Option5', label: '其他' },
]

const options_position = [
  { value: 'Option1', label: '在校学生' },
  { value: 'Option2', label: '实习学生' },
  { value: 'Option3', label: '自由职业' },
  { value: 'Option4', label: '处于失业' },
  { value: 'Option5', label: '其他' },
]

const checkAll = ref(false)
const indeterminate = ref(false)
const selectedCities = ref<CheckboxValueType[]>([])

const cities = [
  { value: 'Beijing', label: '北京' },
  { value: 'Shanghai', label: '上海' },
  { value: 'Nanjing', label: '南京' },
  { value: 'Chengdu', label: '成都' },
  { value: 'Shenzhen', label: '深圳' },
  { value: 'Guangzhou', label: '广州' },
]

watch(selectedCities, (val) => {
  if (val.length === 0) {
    checkAll.value = false
    indeterminate.value = false
  } else if (val.length === cities.length) {
    checkAll.value = true
    indeterminate.value = false
  } else {
    indeterminate.value = true
  }
})

const handleCheckAll = (val: CheckboxValueType) => {
  indeterminate.value = false
  if (val) {
    selectedCities.value = cities.map((_) => _.value)
  } else {
    selectedCities.value = []
  }
}

const interests = ref<string[]>([])
const interestOptions = [
  { label: '体育', value: 'sports' },
  { label: '音乐', value: 'music' },
  { label: '游戏', value: 'games' },
  { label: '八卦', value: 'gossip' },
  { label: '编程', value: 'programming' },
]
</script>

<template>
  <div class="register-container">
    <el-card class="register-card">
      <template #header>
        <div class="card-header">
          <span class="card-title">注册新用户</span>
        </div>
      </template>
      
      <!-- 基础信息部分 -->
      <div class="basic-info-section">
        <el-form :model="{ input1, input2, input3, input4 }" label-width="100px">
          <el-form-item label="用户名">
            <el-input 
              v-model="input1" 
              placeholder="请输入用户名" 
              type="text"
            />
          </el-form-item>

          <el-form-item label="登入邮箱">
            <el-input 
              v-model="input2" 
              placeholder="请输入邮箱" 
              type="email"
            />
          </el-form-item>

          <el-form-item label="密码">
            <el-input 
              v-model="input3" 
              placeholder="请输入密码" 
              type="password"
              show-password
            />
          </el-form-item>

          <el-form-item label="再输入一次">
            <el-input 
              v-model="input4" 
              placeholder="请输入密码" 
              type="password"
              show-password
            />
          </el-form-item>
        </el-form>
      </div>

      <!-- 个人资料部分 -->
      <div class="personal-info-section">
        <div class="section-divider">
          <span class="section-title">个人资料</span>
        </div>
        
        <el-form 
          :model="{ radio1, value001, value002, selectedCities, dateValue, interests, agreement }" 
          label-width="100px"
        >
          <el-form-item label="性别">
            <el-radio-group v-model="radio1">
              <el-radio label="1">男</el-radio>
              <el-radio label="2">女</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="学历">
            <el-select v-model="value001" placeholder="选择学历">
              <el-option
                v-for="item in options_qualification"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          
          <el-form-item label="职业">
            <el-select v-model="value002" placeholder="选择职业">
              <el-option
                v-for="item in options_position"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="所在城市">
            <el-select
              v-model="selectedCities"
              multiple
              clearable
              collapse-tags
              placeholder="选择城市"
              :max-collapse-tags="1"
            >
              <template #header>
                <el-checkbox
                  v-model="checkAll"
                  :indeterminate="indeterminate"
                  @change="handleCheckAll"
                >
                  全选
                </el-checkbox>
              </template>
              <el-option
                v-for="item in cities"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="出生年月">
            <el-date-picker
              v-model="dateValue"
              type="date"
              placeholder="选择日期"
            />
          </el-form-item>

          <el-form-item label="猜你喜欢">
            <el-checkbox-group v-model="interests">
              <div class="interests-grid">
                <el-checkbox 
                  v-for="option in interestOptions" 
                  :key="option.value"
                  :label="option.label"
                  :value="option.value"
                />
              </div>
            </el-checkbox-group>
          </el-form-item>

          <el-form-item>
            <el-checkbox v-model="agreement">
              我已仔细阅读并接受<a href="#" class="agreement-link">注册条约</a>
            </el-checkbox>
          </el-form-item>

          <el-form-item>
            <div class="button-group">
              <el-button type="primary">注册</el-button>
              <el-button type="danger">重置</el-button>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<style scoped>
.register-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 20px;
}

.register-card {
  width: 100%;
  max-width: 500px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  border-radius: 12px;
  overflow: hidden;
}

.card-header {
  text-align: center;
  padding: 20px 0;
  border-bottom: 1px solid #f0f0f0;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

.card-title {
  font-size: 22px;
  font-weight: 600;
  color: #333;
  letter-spacing: 1px;
}

/* 基础信息部分 */
.basic-info-section {
  padding: 20px;
}

/* 个人资料部分 */
.personal-info-section {
  padding: 0 20px 20px;
}

.section-divider {
  text-align: center;
  margin: 20px 0;
  padding-top: 20px;
  border-top: 1px solid #f0f0f0;
}

.section-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  padding: 0 15px;
  background: white;
  position: relative;
  top: -10px;
}

/* 表单样式 */
:deep(.el-form-item) {
  margin-bottom: 20px;
}

:deep(.el-form-item__label) {
  font-weight: 500;
  color: #606266;
}

:deep(.el-input),
:deep(.el-select),
:deep(.el-date-editor) {
  width: 100%;
}

:deep(.el-input__inner) {
  height: 40px;
  border-radius: 8px;
}

/* 兴趣爱好网格布局 */
.interests-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  width: 100%;
}

:deep(.el-checkbox) {
  margin: 0;
}

/* 协议链接样式 */
.agreement-link {
  color: #409eff;
  text-decoration: none;
  margin-left: 4px;
}

.agreement-link:hover {
  text-decoration: underline;
}

/* 按钮组样式 */
.button-group {
  display: flex;
  gap: 16px;
  justify-content: center;
  width: 100%;
  margin-top: 10px;
}

:deep(.el-button) {
  flex: 1;
  max-width: 120px;
  height: 40px;
  border-radius: 8px;
  font-weight: 500;
}

:deep(.el-button--primary) {
  background: linear-gradient(135deg, #409eff, #337ecc);
  border: none;
}

:deep(.el-button--danger) {
  background: linear-gradient(135deg, #f56c6c, #d54c4c);
  border: none;
}

/* 响应式调整 */
@media (max-width: 480px) {
  .register-card {
    max-width: 100%;
    margin: 0 10px;
  }
  
  .interests-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .button-group {
    flex-direction: column;
  }
  
  :deep(.el-button) {
    max-width: 100%;
  }
}
</style>